<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>msg:{{ msg }}</p>
        <input type="text" v-model="msg">
        <br>
        <p>user:{{ user }}</p>
        <input v-model="user.name" type="text" />
        <input v-model="user.age" type="text" />
        <input type="button" value="重置user" @click="user={ name:'jack',age:23 }">
        <br>
        <!-- 
            问法1：在下述情况下如何监控sum的变化
            问法2：如何在vue中使用监视器同时监控多个无关变量的变化
        -->
        <p>sum:{{ num1+num2 }}</p>
        <p>sum:{{ sum }}</p>
        <input type="number" v-model="num1">
        <input type="number" v-model="num2">
        <br><br>
        <input type="button" value="开启监视器" @click="openWatch()">
    </div>
    <script type="module"> 
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    msg:"msg",
                    user:{
                        name:"tom",
                        age:23
                    },
                    num1:10,
                    num2:20
                }
            },
            computed: {
                sum() {
                    return this.num1+this.num2 
                }
            },
            watch: {
                sum(nv, ov) {
                    console.log("计算属性sum发生变化",nv,ov)
                }
            },
            // unwatch = vm.$watch(key,handler,options)
            //    - key: 被监控的变量名|对象属性路径|方法,
            //    - handler: 触发是的回调函数
            //    - options: 扩展配置 { deep:false,immediate:false }
            //    - 返回值 unwatch 是一个回调方法，执行该方法时可以完成对于的监视器的删除关闭操作
            methods: {
                openWatch() {
                    this.$watch("msg",(nv,ov)=>{
                        console.log("msg被修改:",nv,ov)
                    })
                    
                    this.$watch("user",(nv,ov)=>{
                        console.log("user被修改:",nv,ov)
                    })

                    this.$watch("user",(nv,ov)=>{
                        console.log("深度监控-user被修改:",nv,ov)
                    },{
                        deep:true
                    })

                    this.$watch("user.name",(nv,ov)=>{
                        console.log("user.name被修改:",nv,ov)
                    })

                    // 可控监视器 key 取值方法，是通过方法内部的逻辑关系关联实例的多个相关变量
                    //          通过对多个变量的相关关联，实现统一监控方法执行
                    //      ！！可控监视器key取值方法，实际上就是一个不可以被开发者直接调用的计算属性定义
                    this.$watch(
                        ()=>{
                            // console.log(this.num1)
                            // console.log(this.num2)
                            // return this.num1+this.num2;
                            // return [ this.num1,this.num2 ]; 
                            return {
                                num1:this.num1,
                                num2:this.num2
                            }
                        },
                        (nv,ov)=>{
                            console.log("num1+num2的结果发送变化:",nv,ov)
                        }
                    )
                }
            },
        }).mount("#app")
    </script>
</body>
</html>